<template>

  <div>

    <div class="login-container">
      <div style="width: 500px" class="login-box">
        <div style="font-weight: bold;font-size: 24px;text-align: center; margin-bottom: 30px">登录</div>
        <el-form ref="formRef" :model="data.form" :rules="rules" >
          <el-form-item label="账号" prop="username">
            <el-input  v-model="data.from.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input  v-model="data.from.password" placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item prop="role"  label="用户选择">
            <el-select style="width:100%" v-model="data.from.role">

              <el-option label="管理员" value="Root">管理员</el-option>
              <el-option label="学生" value="Student">学生</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login">登入</el-button>
          </el-form-item>

        </el-form>
        <div style="margin-top: 30px;text-align: right">还没有账号？请<a href="/register">注册</a></div>





      </div>



    </div>

  </div>
</template>

<script setup>

import {reactive,ref} from "vue";
import request from "@/utils/request.js";

import {ElMessage} from "element-plus";

const data = reactive({
  from:{ role:'Root' }

})



//
// const formRef = ref()
//
//
//
// const rules = reactive({
//   username: [
//     { required: true, message: '请输入账号 ', trigger: 'blur' }
//   ],password: [
//     { required: true, message: '请输入密码 ', trigger: 'blur' }
//   ]
//
// })
//
const login =()=>{
  request.post('/login',data.from).then(res=>{
    console.log(res.data.code)


    if (res.data.code===1){
      localStorage.setItem('student-user',JSON.stringify(res.data))
      ElMessage.success('登入成功')
      location.href='/home'  //跳转到主页

    }else{
      ElMessage.error('登入失败')

    }

  })

}
//表单校验？

</script>

<style scoped>
.login-container{
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("@/assets/img/back.png");
  background-size: cover;


}
.login-box{

  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  padding: 80px;
  border-radius: 25px;

}
</style>
